<template>
	<u-skeleton :loading="isLoading" rows="10">
		<view>

			<view class="chou" v-if="!isState ">
				<view class="zise_title">
					选择题库
				</view>

				<u-divider />
				<view class="" style="width: 600rpx;">
					<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
						<view class="">
							<u-checkbox
								:customStyle="{marginBottom: '8px',float:'left',marginLeft:'20rpx',width:'180rpx',height:'60rpx'}"
								v-for="(item, index) in checkboxList1" :label="item.name" :name="item.label"
								:key="item.id"
								:disabled="item.disabled">
							</u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
				<u-divider />

				<view class="">

					<view class="" style="display: flex;justify-content: space-between;">
						<view style="float: left;">
							<view class="y_tag floatright y_tag_bgPrimary mlshi">
								刷题数量
							</view>

						</view>
						<view class="y_cell_right">
							<view style="float: left;">
								<u-number-box :min="10" :max="100" :value="topicnum" button-size="26" color="#000"
									@change="topicChange" bgColor="#f2f3f4" iconStyle="color: #000"></u-number-box>
							</view>

						</view>
					</view>

					<u-divider />

					<!-- 	<view class="big_button">
         	        		<u-button type="primary" @click="sure" :disabled="checkboxValue1.length==0">确 定</u-button>
         	        	</view> -->


					<view class="big_button">
						<u-modal :show="show" @confirm="confirm" ref="uModal" @cancel="quxiao" showCancelButton
							:asyncClose="true">
							确认开始刷题吗?</u-modal>
						<u-button @click="showModal" type="primary" :disabled="checkboxValue1.length==0">确 定</u-button>
					</view>

				</view>
			</view>


			<view class="brush" v-else>
				<view class="top" style="height: 60rpx; line-height: 60rpx;">

					<view class="floatleft" style="float: left;">

						<view class="y_tag y_tag_bgPrimary floatleft" style="margin-top:14rpx;margin-left: 30rpx;">
							第 {{index+1}} 题
						</view>
					</view>

<!--  -->
					<view class="floatright qcount" style="position: absolute; right: 0px; top:0rpx">
						<view class="icon iconfont icon-renwu" @click="()=>tankaung_show=true">
							<text style="padding-left: 6rpx;">{{topicList.data.length}}</text>
						</view>
					</view>

				</view>






				<view style="height: 20rpx; background-color: rgb(249, 249, 249);">
				</view>


				<view class="allContent" :animation="animation" v-if="topicList">

					<view class="content">

						<view class="title-type">
							<!-- 						<view class="floatleft" style="margin-left:20rpx">
							<view class="y_tag" style="margin-top: 10rpx;">
								单选题
							</view>
						</view>

						<view class="floatright" style="margin-right: 10rpx;">
							<view class="y_tag y_tag_bgWarning" style="margin-top: 10rpx;">
								3232
							</view>
						</view> -->
							<view class="y_cell" style="border-bottom: 1px solid #eee;">

								<view class="y_cell_left">
									<view style="float: left;">
										<view class="y_tag floatright y_tag_bgPrimary">
											单选题
										</view>

									</view>
								</view>


								<view class="y_cell_right">
									<view style="float: left;">
										<view class="y_tag floatright y_tag_bgWarning">
											{{topicList.data[index].labels}}
										</view>

									</view>

								</view>


							</view>

						</view>


						<view class="" style="width: 96%; padding:10rpx;margin-top: 10rpx;">
							<rich-text :nodes="topicList.data[index].content"></rich-text>
						</view>

					</view>

					<view style="width: 100%;" v-for="(item,i) in topicList.data[index].options" :key="item.id">
						<view class="options" @click="selected(item)" :class="[item.isSelected?'selectOptions':'']">
							{{xuanA[i]}}.{{item.content}}
						</view>

					</view>
					<u-divider />



					<u-button type="warning" class="prev" @click="prev" :disabled="index==0">上一题</u-button>

					<view class="" style="margin-top: 20rpx;" >
						<u-button type="primary" v-if="index != topicList.data.length - 1" class="next"
							@click="next">下一题</u-button> 

						<u-modal :show="show_jiao" @confirm="complete" ref="uModal" @cancel="()=>show_jiao=false"
							showCancelButton :asyncClose="true">
							确认交卷吗?</u-modal>
						<u-button @click="showModal_jiao" type="success" style="width: 96%;"
							v-if="index == topicList.data.length - 1">交 卷</u-button>




					</view>
				</view>


				<u-popup :show="tankaung_show" mode="top" custom-style="height: 30%;" @close="()=>tankaung_show=false">
					<view style="width: 100%; height: 100%; padding-top: 20rpx;padding-bottom: 20rpx;">
						<view v-for="(item,i) in topicList.data" class="tan" :key="item.id"
							:class="[item.isSelected==true?'selectOptions':'']" @click="checkTopic(i)">
							{{i+1}}
						</view>
					</view>
				</u-popup>



			</view>

		</view>
	</u-skeleton>
</template>

<script>
	import dayjs from 'dayjs';
	import {
		GetRandomQuestions,
		getQuestionBanks,
		PracticeJiaoJuan
	} from '../../../api/brush_questions.js';
	export default {
		data() {
			return {
				/**
				 * 抽提组成的试卷id
				 */
				id: '',
				/**
				 * 开始考试模态框状态
				 */
				show: false,
				/**
				 * 交卷模态框状态
				 */
				show_jiao: false,
				/**
				 * 刷题数量
				 */
				topicnum: 10,
				/**
				 * 选中的题库
				 */
				checkboxValue1: [],
				/**
				 * 题库
				 */
				checkboxList1: [],
				/**
				 * 根据题库获取到的题目
				 */
				topicList: [],
				isState: false,
				index: 0,
				xuanA: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
				//答题卡
				datika: [],
				animation: null, //动画对象
				jiaodu: 0,
				/**
				 * 答题卡弹出层状态
				 */
				tankaung_show: false,
				isLoading: true,
				code: "",
				startTime:""
			}
		},
		onLoad(option) {
			// this.code = option.code;
			// console.log(this.code);
			// if (this.code != undefined) {
			// 	this.isState = true;
			// 	this.topicList.data = uni.getStorageSync(this.code).data;
			// 	this.datika = uni.getStorageSync(this.code).datika;
			// 	this.startTime=uni.getStorageSync(this.code).startTime;
			// 	console.log(uni.getStorageSync(this.code).startTime);
			// 	this.isLoading = false;
			// 	this.id = this.code;
			// }else{
				this.getQuestionBanks();
			// }
		},
		onShow() {
			//页面初始获取题库
			// else{
			// 	this.getQuestionBanks();
			// }
			// if (this.code) {
					
			// }

			let val = this.checkboxValue1;
			console.log(val);
			if (val.find(d => d == -1)) {
				this.checkboxList1.map(d => {
					if (d.label != -1) {
						d.disabled = true;
					}
				})
			} else {
				this.checkboxList1.map(d => {
					d.disabled = false;
				})
				if (val.length != 0) {
					this.checkboxList1.map(d => {
						if (d.label == -1) {
							d.disabled = true;
						}
					})
				}
				// this.checkboxValue1 = val;

			}

		},
		methods: {
			/**
			 * 交卷按钮触发事件
			 */
			complete() {
				const {
					topicList,
					datika,
					id
				} = this;
				let testpaper = topicList.data;
				this.show_jiao = false;
				console.log(uni.getStorageSync("user"));
				if (datika.length != testpaper.length) {
					uni.showToast({
						title: '还有题目未作答',
						icon: "none"
					})

					this.tankaung_show = true;
				} else {
					uni.showLoading({
						title: "请稍后....",
					});
					let timeCount = Math.ceil((new Date().getTime() - new Date(this.startTime).getTime()) / 1000);
					if (this.checkboxValue1.find(d => d == -1)) {
						this.checkboxValue1 = [];
					}
					console.log(uni.getStorageSync(this.id));
					PracticeJiaoJuan({
						count: this.topicnum,
						questionBanks: this.checkboxValue1,
						code: id,
						answers: datika,
						timeCount: timeCount,
					}).then((res) => {
						if (res.result === 0) {
							uni.removeStorageSync(id);
							uni.showToast({
								title: '操作成功',
								icon: "none"
							})

							setTimeout(() => {
								uni.hideLoading();
								uni.redirectTo({
									url: "/pages/brush_questions/result/result?id=" + res.data.id
								})
							}, 1500);

						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})

				}

			},
			/**
			 * 弹出框选中哪题跳转到哪题
			 */
			checkTopic(index) {
				this.index = index;
				this.tankaung_show = false;
			},
			/**
			 * 上一题
			 */
			prev() {
				let {
					index,
					topicList
				} = this;
				let testpaper = topicList.data;
				if (index <= 0) {
					return
				}

				if (index <= testpaper.length - 1) {
					//设定动画
					let animation = uni.createAnimation({
						duration: 300,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {
						this.index = index - 1;
					}, 350);
				}
			},

			/**
			 * 下一题
			 */
			next() {

				let {
					index,
					topicList
				} = this;
				let testpaper = this.topicList.data;
				if (index < testpaper.length - 1) {
					//设定动画
					let animation = uni.createAnimation({
						duration: 300,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {
						this.index = index + 1;

					}, 350);
				}
			},


			/**
			 * 选中背景变色 计入答题卡
			 * @param {} event 
			 */
			selected(val) {
				let answer = val;
				const {
					datika,
					index,
					topicList,
					id
				} = this;

				let testpaper = this.topicList.data;
				let temp = datika.find(d => d.qid == testpaper[index].id);
				if (temp == undefined) {
					datika.push({
						qid: testpaper[index].id,
						answers: [answer.id]
					})
				} else {
					datika.map(d => {
						if (d.qid == temp.qid) {
							d.answers = [answer.id];
						}
					})
				}

				testpaper[index].isSelected = true;
				testpaper[index].options.map(d => {
					d.isSelected = false;
					if (d.id == answer.id) {
						d.isSelected = true;
					}
				})


				this.topicList.data = testpaper;
				this.datika = datika;
				console.log(this.topicList, this.datika,this.startTime);
				uni.setStorageSync(id, {
					data: testpaper,
					datika: datika,
					startTime:this.startTime
				});
				this.$forceUpdate();

				if (index < testpaper.length - 1) {
					//设定动画
					let animation = uni.createAnimation({
						duration: 300,
						delay: 0,
						timingFunction: "linear",
					});

					this.animation = animation;


					setTimeout(() => {
						this.changeQuestion(0);
					}, 50);
					setTimeout(() => {

						this.index = index + 1;

					}, 350);
				}


			},
			//动画旋转
			//旋转
			changeQuestion: function(action) {
				let {
					animation,
					jiaodu
				} = this;
				//顺时针旋转10度
				if (action == 0) {
					jiaodu += 360;
				} else {
					jiaodu -= 360;
				}
				// animation.rotate3d(jiaodu, jiaodu, jiaodu, jiaodu).step();
				this.animation.scale3d(0.01, 1, 445).step();
				this.animation.scale3d(1, 1, 461).step();

				//输出动画
				this.animation = animation.export();
				this.jiaodu = jiaodu;

			},
			//点击开始刷题模态框
			showModal() {
				this.show = true;
			},
			//点击开始刷题模态框
			showModal_jiao() {
				this.show_jiao = true;
			},
			//取消根据题库刷题
			quxiao() {
				this.show = false;
			},
			//确认刷题
			confirm() {
				this.sure();
			},

			//题目数量
			topicChange(name) {
				this.topicnum = name.value;

			},
			//获取题库
			getQuestionBanks() {
				getQuestionBanks({
					isPublish: 1
				}).then(res => {
					if (res.result === 0) {
						console.log(res);
						const temp = res.data.data;
						const newSz = temp.map(d => {
							if (d.isBan == 0) {
								d.name += '(废弃)';
							}
							return d = {
								name: d.name,
								label: d.id,
								disabled: false
							}
						})
						newSz.unshift({
							name: '无限制',
							disabled: false,
							label: -1
						})
						this.checkboxList1 = newSz;
						this.isLoading = false;

					}
				})
			},
			//根据题库抽题
			sure() {
				let questionbanks = this.checkboxValue1;
				if (this.checkboxValue1.find(d => d == -1)) {
					questionbanks = [];
				}
				GetRandomQuestions({
					count: this.topicnum,
					qbs: questionbanks.length==0?"":questionbanks.join(",")
				}).then(res => {
					this.show = false;
					if (res.result === 0) {

						res.data.data.map(d => {
							d.isSelected = false;
							d.options.map(e => e.isSelected = false)
						});
                        //设置开始考试时间
						this.startTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
						this.topicList = res.data;
						
						
						if (uni.getStorageSync(res.data.code) != "") {
							this.topicList.data = uni.getStorageSync(res.data.code).data;
							this.datika = uni.getStorageSync(res.data.code).datika;
						}
						this.id = res.data.code;

						this.isState = true;
					} else if (res.result == -1) {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
					} else {
						uni.showToast({
							title: "异常,请联系技术人员处理",
							icon: "none"
						});
					}
				})
			},
			/**复选框改变事件
			 * @param {Object} 
			 */
			checkboxChange(val) {
				if (val.find(d => d == -1)) {
					this.checkboxList1.map(d => {
						if (d.label != -1) {
							d.disabled = true;
						}
					})
				} else {
					this.checkboxList1.map(d => {
						d.disabled = false;
					})
					if (val.length != 0) {
						this.checkboxList1.map(d => {
							if (d.label == -1) {
								d.disabled = true;
							}
						})
					}



				}
				this.checkboxValue1 = val;
			}
		}
	}
</script>

<style>
	.top {
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #eee;
		background: #fff;
	}

	.qcount {
		margin-right: 20rpx;
		color: rgb(199, 196, 196);
	}


	.title-type {
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
	}


	.title-content {
		background-color: rgb(241, 241, 241);
		min-height: 100rpx;
		width: 98%;
		border-radius: 8rpx;
		margin-left: 0.9%;

		padding: 0 8rpx 8rpx 8rpx;
	}

	.content {
		width: 96%;
		margin-left: 2%;
		padding-bottom: 10rpx;
	}


	.options {
		border: 1px solid #eee;
		width: 90%;
		padding: 2.5%;
		margin-top: 20rpx;
		margin-left: 18rpx;
		border-radius: 12rpx;
	}

	.selectOptions {
		background-color: rgb(25, 137, 250) !important;
		color: #fff !important;
	}

	.prev,
	.next {
		width: 96%;
		margin-left: 2%;
		margin-top: 20rpx;
	}


	.tan {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx;
		margin-left: 10rpx;
		line-height: 50rpx;
		text-align: center;
		float: left;
		border: 1px solid #1989fa;
		color: #1989fa;
		border-radius: 10rpx;
	}

	.allContent {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12), 0 0 12rpx rgba(0, 0, 0, .04);
	}



	.u-count-down {
		color: #fff;
	}

	.time {
		color: #fff;
	}




	.examing-title {
		margin-top: 20rpx;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}


	.cell-hover-class {
		background-color: rgb(235, 237, 238);
	}

	/* 或者单是设置透明度 */
	.cell-hover-class {
		opacity: 0.5;
	}
</style>